 <template>
	<view class="">
		<scroll-view scroll-y="true" class="content">
			<view class="" v-if="userinfo.role == 2">
				<view class="title-left">
					营业厅名称
				</view>
				<view class="item">
					{{userinfo.store}}
				</view>
			</view>
		
			<view class="" v-if="userinfo.role == 2">
				<view class="title-left">
					发展人
				</view>
				<view class="item">
					{{userinfo.name}} {{userinfo.phone}}
		
				</view>
			</view>
		
			<view class="" style="display: flex;justify-content: space-between; align-items: center;">
				<view class="" style="display: flex; align-items: center;">
					<view class="title-left">
						档位
					</view>
					<view v-if="data.dangwei != ''"  style="display: flex;align-items: center; margin: 20rpx; color: #007aff; font-size: 40rpx; font-weight: 700;">
						{{data.dangwei}}
					</view>
				</view>
				<view class="item">
					<button type="primary" style="background-color: #007aff; color: white;" @click="chooseDangweiAction"
						size="mini">选档位</button>
				</view>
			</view>
		
			<!-- <view class="" v-if="data.store != ''" >
				<view v-if="data.store != ''"  style="display: flex;align-items: center; margin: 20rpx; color: #007aff; font-size: 30rpx; font-weight: 700;">
					{{data.store  + "/ ¥ " + data.price}}
				</view>
			</view> -->
			<view class="">
				<view class="title-left">
					返现金额 (给用户的现金)
				</view>
				<view class="box-border item">
					<input type='digit' placeholder="请输入返现金额" v-model="data.xprice">
				</view>
			</view>
			<view class="" v-if="userinfo.role == 2">
				<view class="title-left">
					补差款金额 (补收用户差价)
				</view>
				<view class="box-border item">
					<input type='digit' placeholder="请输入补差款金额" v-model="data.bprice">
				</view>
			</view>
			<view class="" style="display: flex;justify-content: space-between; align-items: center;">
				<view class="title-left">
					请选择家电
				</view>
				<view class="item">
					<button type="primary" style="background-color: #007aff; color: white;" @click="chooseGoodsAction"
						size="mini">选商品</button>
				</view>
			</view>
		
			<view  class="" style=" display: flex; flex-wrap: wrap; margin: 0 20rpx;">
				<view style="position: relative;" v-for="(item,index) in data.goodItems" class="">
					<view style="color: #007aff; border: 2rpx solid #007aff; margin:10rpx; padding: 2rpx 10rpx; border-radius: 6rpx;"
						class="">
						{{item.name + '/' + item.type + '/' + item.price}}
					</view>
					<image @click="delecAction" :data-index="index"
						style="right: 0;top: 0; position: absolute; width: 40rpx; height: 40rpx;"
						src="../../static/close.png" mode="widthFix"></image>
				</view>
			</view>
		
			<view v-if="userinfo.role == 2" class="">
				<view class="title-left">
					办理人姓名
				</view>
				<view class="box-border">
					<input type="text" placeholder="请输入用户姓名" v-model="data.yname">
				</view>
			</view>
			<view v-if="userinfo.role == 2" class="">
				<view class="title-left">
					办理人手机号
				</view>
				<view class="box-border item">
					<input type="number" placeholder="请输入用户手机号" v-model="data.yphone">
				</view>
			</view>
			<view v-if="userinfo.role == 2" class="" style="display: flex;justify-content: space-between; align-items: center;">
				<view class="title-left">
					收货信息 (姓名+手机号+详细地址)
				</view>
			</view>
			<view v-if="userinfo.role == 2" class=""
				style="border-radius: 12rpx; margin: 20rpx; font-size: 28rpx; font-weight: 700; border: 2rpx solid #e5e5e5;">
				<textarea v-model="data.address" style="margin: 20rpx; height: 100rpx;" name="" id="" cols="30"
					rows="10"></textarea>
			</view>
			
		</scroll-view>
		<view class=""
			style="height: 120rpx;line-height: 120rpx; background-color: #fff; position: sticky; left: 0;right: 0; bottom: 0;">
			<button @click="buttonAction" type="primary"
				style="margin: 20rpx; background-color: #007aff;color: white; height: 88rpx; font-size: 30rpx;display: flex; align-items: center; justify-content:center">确定</button>
		
		</view>
	</view>
</template>

<script>

	import api from '../../utils/interface.js'

	export default {
		data() {
			return {
				userinfo: {},
				dataArray: [

				],
				value: 0,
				data: {
					goods: '',
					goodItems:[],
					address:'',
					xprice: 0,
					bprice: 0,
					yname:'',
					yphone:'',
					dangwei:''
				},
				range: [],
				type:0,
				show: false
			}
		},
		onLoad(options) {
			console.log(options);
			this.type = options.type
			uni.setNavigationBarTitle({
				title:this.type == 1 ? "编辑订单":"添加订单"
			})
			if(this.type == 1){
				this.data = getApp().globalData.tempItem
			}
			this.userinfo = uni.getStorageSync('data')
			this.data.uid = this.userinfo.id
			this.data.sid = this.userinfo.sid
		
			uni.$on('update', data => {

				if (this.data.goodItems.length == 0) {
					this.data.goodItems = [...data.list]
				} else {
					this.data.goodItems = [...data.list, ...this.data.goodItems]
				}
				const str = this.data.goodItems.map( item =>{
					return item.id
				}).join(',');
				console.log(str); // 输出: "1,2,3,4,5"

				this.data.goods = str
			})
			
			uni.$on("chooseDangwei", data =>{
				console.log(data);
				
				this.data.did = data.id;
				this.data.dangwei = data.name + ' / ¥ ' + data.price
			})
		},
		onUnload() {
			uni.$off('passvalue')
			uni.$off("chooseDangwei")
		},
		
		methods: {
			chooseDangweiAction(){
				uni.navigateTo({
					url:"/pages/chooseDangwei/chooseDangwei"
				})
			},
			async buttonAction() {
				if(this.userinfo.role == 2){
					if(this.data.dangwei.length == 0 || this.data.dangwei == ""){
						return uni.showToast({
							title:"请选择档位信息",
							icon:'none'
						})
					}
					if(this.data.yname.length == 0 || this.data.yname == ""){
						return uni.showToast({
							title:"请填写用户姓名",
							icon:'none'
						})
					}
					if(this.data.yphone.length == 0 || this.data.yphone == ""){
						return uni.showToast({
							title:"请填写用户手机号",
							icon:'none'
						})
					}
					
					if(this.data.yphone.length != 11){
						return uni.showToast({
							title:"请填写正确手机号",
							icon:'none'
						})
					}
					if(this.data.address.length == 0 || this.data.address == ""){
						return uni.showToast({
							title:"请填写收货地址",
							icon:'none'
						})
					}
					
				}
				var url = '';
				if(this.type == 1){
					url = api.baseUrl + api.xiugaiOrder
				}else{
					url = api.baseUrl + api.addOrder
					
				}
				const config = {
					url,
					method: 'post',
					data: this.data
				}
				const {
					data,
					code,
					msg
				} = await this.$http.request(config)
				console.log(code, data);
				if (code == 1) {
					uni.showToast({
						icon: "none",
						title: this.type == 1 ? '修改成功':'添加成功'
					})
					if(this.type == 1){
						uni.$emit('shuaxinshuju', {})
					}
					setTimeout(item =>{
						uni.navigateBack()
					},1500)
				
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			openPicker() {
				console.log('执行打开地址选择器')
				this.show = true
			},

			changeClick(value, value2, value3, value4) {
				this.data.province = value;
				this.data.city = value2;
				this.data.area = value3;
				console.log(value,value2,value3);
			},
			onhideShow() {
				this.show = false
				console.log('执行了关闭地址选择器')
			},
			//选中省市区
			onsetCity(e) {
				let data = e.detail.target.dataset;
				this.data.province = data.province;
				this.data.city = data.city;
				this.data.area = data.area;;
				this.show = false
				
			},
			// 
			switchChange(e) {

			},
			shouhuoBtnAction() {
				this.show = true
			},
			delecAction(e) {
				const index = e.currentTarget.dataset.index
				this.data.goodItems.splice(index, 1)
				const str = this.data.goodItems.map( item =>{
					return item.id
				}).join(',');
				this.data.goods = str
			},
			chooseGoodsAction() {
				uni.navigateTo({
					url: '/pages/GoodsList/GoodsList'
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		margin: 20rpx 0;
		font-size: 28rpx;
		height: calc(100vh - 130rpx);
	}

	.item {
		margin: 10rpx 20rpx;
		background-color: white;
		border-radius: 12rpx;
		font-weight: 700;

	}



	.title-left {
		border-left: 8rpx solid #007aff;
		padding: 0 10rpx;
		margin: 20rpx;
		font-weight: 700;
	}

	.box-border {
		margin: 0 20rpx;
		border: 2rpx solid #e5e5e5;
		padding: 10rpx;
	}
</style>